<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <title>Psychology Manage System</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/img/favicon.png">

    <link rel="stylesheet" href="assets/css/element.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">

    <!-- Fontawesome CSS -->
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">


    <!-- Main CSS -->
    <link rel="stylesheet" href="assets/css/style-copy.css">

    <script src="assets/js/vue.js"></script>
    <script src="assets/js/axios.js"></script>
    <script src="assets/util/localStorageUtil.js"></script>
    <script src="assets/util/request.js"></script>
    <script src="assets/util/common.js"></script>
    <script src="assets/js/element.js"></script>


    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
    <style>

        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .right{
            border-radius: 20px;
            background-color: #fff;
        }
        .bs-glyphicons {
            margin-left: 20px;
            margin-bottom: 20px;
            overflow: hidden;
        }


        span{
            word-break:normal;
            width:auto;
            white-space:pre-wrap;
            word-wrap : break-word ;
            overflow: hidden ;
        }

        .bs-glyphicons ul {
            display: block;
            list-style-type: disc;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 40px;
            margin-top: 0;
            margin-bottom: 10px;
            padding: 0px;
        }
        .bs-glyphicons li{
            text-align: center;
            display: inline-block;

        }
        .bs-glyphicons li a{
            width: 50px;
            height: 50px;
            padding: 10px;
            font-size: 20px;
            line-height: 1.4;
            color: black;
            /*background-color: #eceaea;*/
            border: 3px solid #f7f8f9;
            display: list-item;
            text-align: -webkit-match-parent;
        }
        .bs-glyphicons li a:hover {
            background-color: #c9c6c6;
        }
        .bs-glyphicons .glyphicon-class {
            display: block;
        }
        body{
            background-color: #f7f8f9;
        }


    </style>
</head>
<body>

<!-- Main Wrapper -->
<div class="main-wrapper" id="examinationdetail">



    <el-dialog
            title="试题结果"
            :visible.sync="dialogVisible"
            width="40%"
            :before-close="handleClose">
        <hr style="background-color: #66b1ff;margin-top: -15px">
        <div v-for="(item,index) in judgeList" :key="index">
            <strong style="font-size: 20px;color: #66b1ff;margin-top: 5px">{{index+1}}. </strong><span>{{item.dimensionName}}</span>
            <div style="font-size: 15px;font-family: 'Microsoft YaHei',serif;font-style: italic;color: #9A5F09FF;margin-top: 5px;letter-spacing: 2px">{{item.judgeName}}</div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleClose" icon="el-icon-s-home">返回个人中心</el-button>
        </div>

    </el-dialog>


    <!-- Mobile Menu Toggle -->
    <a class="mobile_btn" id="mobile_btn" style="position: fixed">
        <i class="fas fa-bars"></i>
    </a>
    <!-- /Mobile Menu Toggle -->

    <!-- Sidebar -->
    <div class="sidebar" id="sidebar" >
        <div class="sidebar-inner slimscroll">
            <div class="bs-glyphicons">
                <div>
                    <h5  style="margin-top: 20px;text-align: center"><strong>{{this.scaleName}}</strong></h5>
                    <h6  style="margin-top: 20px;margin-bottom: 20px;text-align: center"><span>答题人：{{this.nickname}}</span> <span style="margin-left: 10px">耗时：{{form.time}}</span></h6>
                </div>

                <div>
                    <ul class="bs-glyphicons-list">
                        <li class="nav-item" v-for="(item,index) in form.questionList" :key="index">
                            <span class="glyphicon-class"><a :href="'#'+index" :id="'index'+index">{{index+1}}</a></span>
                        </li>
                    </ul>
                </div>
                <div style="text-align: center;margin-top: 20px">
                    <el-button type="primary" v-on:click="onSubmit">提交答案</el-button>
                </div>
            </div>
        </div>
    </div>
    <!-- /Sidebar -->

    <div class="page-wrapper" >
        <div class="content container-fluid">
            <div class="row ">
                <div class="col-md-9 right" >
                    <el-form ref="form" :model="form" style="margin-top: 20px">
                        <el-form-item v-for="(item ,index) in form.questionList" :key="index" :id="index">
                            <h5>{{index+1}}.{{item.questionName}}</h5>
                            <el-radio-group v-model="form.questionList[index].optionCode">
                                <el-radio v-for="op in item.optionList" :label="op.optionCode" @change="selectRadio(index)">{{op.optionCode}}. {{op.optionName}}</el-radio>
                            </el-radio-group>
                            <hr/>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- /Main Wrapper -->

<!-- jQuery -->
<script src="assets/js/jquery-3.5.1.min.js"></script>

<!-- Bootstrap Core JS -->
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>

<!-- Feather Icon JS -->
<script src="assets/js/feather.min.js"></script>

<!-- Slimscroll JS -->
<script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>


<!-- Custom JS -->
<script src="assets/js/script.js"></script>

</body>

<script>
    let storage = new Storage();

    var examinationdetail = new Vue({
        el: '#examinationdetail',
        data(){
            return {
                //初始页
                dialogVisible: false,
                userinfo: '',
                collapse: false,
                judgeList: [],
                hour: 0,
                minute: 0,
                ms: 0,
                second: 0,
                scaleName: '',
                nickname: '',
                activePage: '/examination.html',
                form:{
                    time:"",
                    scaleId: null,
                    questionList: [],
                },
                loading: false
            }
        },
        methods: {
            getUserInfo() {
                //设置用户信息
                if(storage.getItem("userinfo")!=null){
                    this.userinfo = storage.getItem("userinfo");
                    initMenu(storage.getItem("routeMap"),this.activePage)
                }else{
                    service.get("/user/getUserInfo").then(res=>{
                        storage.setItem({
                            name: "userinfo",
                            value: res.data.userinfo
                        })
                        storage.setItem({
                            name: "routeMap",
                            value: res.data.routeMap
                        })
                        initMenu(res.data.routeMap,this.activePage)
                        this.userinfo = res.data;
                    });
                }
            },
            onSubmit(){
                for(let i = 0; i<this.form.questionList.length; i++){
                    if(this.form.questionList[i].optionCode==null||this.form.questionList[i].optionCode===''){
                        this.$message({
                            message: "请完成所有问题",
                            type: 'warning',
                        })
                        return;
                    }
                }
                service({
                    method: "post",
                    url: "/exam/examScale",
                    data: this.form
                }).then(res => {
                    this.judgeList = res.data;
                    this.dialogVisible=true;
                }).finally(() => {
                    this.loading = false
                })

            },
            timeStart(){
                setInterval(this.timer,50)
            },
            handleClose(done) {
                this.dialogVisible = false;
                window.location.href="/profile.html"
            },
            timer(){
                this.ms = this.ms + 50 //毫秒
                if(this.ms >= 1000){
                    this.ms=0
                    this.second = this.second + 1
                }
                if(this.second >=60){
                    this.second = 0;
                    this.minute = this.minute + 1
                }
                if(this.minute >= 60){
                    this.minute = 0
                    this.hour = this.hour +1
                }
                this.form.time = this.toDub(this.hour)+":"+this.toDub(this.minute)+":"+this.toDub(this.second)
            },
            toDub(n){
                if(n<10){
                    return '0'+n
                }else{
                    return ""+n
                }
            },
            async getScaleDetail() {
                var scaleId = getParam("scaleId");
                this.form.scaleId = scaleId;
                this.loading = true
                await service({
                    method: "get",
                    url: "/exam/getExamDetail?scaleId=" + scaleId,
                }).then(res => {
                    this.form.questionList = res.data.questionList;
                    this.scaleName = res.data.scaleName;
                    this.nickname = res.data.nickname;
                }).finally(() => {
                    this.loading = false
                })
            },
            selectRadio(index){
                var ele = "index"+index;
                document.getElementById(ele).style.border='3px solid #409EFF';
            }
        },
        created(){

        },
        mounted() {
            this.timeStart();
            this.getScaleDetail();
            intThisPoint(this);
            this.getUserInfo();
        },
    })





</script>
</html>
